<template>
  <div class="shareContainer" ref="shareContainer">
    <!-- 拆单合单的组件 -->
    <div class="waybill_content">
      <!-- 运单号 ========================================== -->
      <div class="waybill_title">
        <div class="waybill_left">
          <span>运单号：</span>
          <!-- <span>
            <el-input :disabled="disabledTure.waybill_code" style="width: 270px" v-model="formData.waybill_code" placeholder=""></el-input>
          </span> -->
          <el-input
            :disabled="disabledTure.waybill_code"
            v-model="formData.waybill_code"
            maxlength="20"
            placeholder="默认自动生成"
            style="width: 230px"
          ></el-input>
        </div>
        <div class="waybill_time">
          <span>开单时间：</span>
          <span>{{ new Date().toLocaleString() }}</span>
        </div>
      </div>
      <!-- 内容 ====================== -->
      <div class="article">
        <!-- 发货网点 ===================== -->
        <div class="waybill_top">
          <div class="waybill_item warbill_c">
            <span style="color: red">* </span>
            <span class="order-number-name">出发网点：</span>
            <el-select
              style="width: 220px"
              filterable
              @change="selectedWebsite"
              v-model="formData.departure_id"
            >
              <el-option
                v-for="website in websiteList"
                :key="website.id"
                :label="website.name"
                :value="website.id"
              />
            </el-select>
          </div>
          <div class="waybill_item warbill_f">
            <span style="color: white">* </span>
            <span class="order-number-name">发站：</span>
            <el-input
              :disabled="disabledTure.departure_station_name"
              v-model="formData.departure_station_name"
              style="width: 220px"
            ></el-input>
          </div>
          <div class="waybill_item warbill_d">
            <span style="color: white">* </span>
            <span class="order-number-name">到站：</span>
            <el-input
              :disabled="disabledTure.at_station_name"
              v-model="formData.at_station_name"
              style="width: 220px"
            ></el-input>
          </div>
          <div class="waybill_item warbill_m">
            <span style="color: red">* </span>
            <span class="order-number-name">目的网点：</span>
            <el-select
              :disabled="disabledTure.destination_network_id"
              filterable
              style="width: 220px"
              @change="selectedWebsite2"
              v-model="formData.destination_network_id"
            >
              <el-option
                v-for="website in websiteList"
                :key="website.id"
                :label="website.name"
                :value="website.id"
              />
            </el-select>
          </div>
          <div class="waybill_item warbill_l">
            <span style="color: white">* </span>
            <span class="order-number-name">路由：</span>
            <el-select
              style="width: 220px"
              allow-create
              filterable
              remote
              reserve-keyword
              :remote-method="searchRouterList"
              v-model="formData.router_id"
              @change="selectedRouter"
            >
              <el-option
                v-for="item in routerList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="waybill_item warbill_w">
            <span style="color: red">* </span>
            <span class="order-number-name">承运类型：</span>
            <el-select
              style="width: 160px"
              v-model="formData.waybill_product_type"
              @change="selectTransportsType"
            >
              <el-option
                v-for="type in transportsType"
                :key="type.id"
                :label="type.name"
                :value="type.id"
              />
            </el-select>
          </div>
          <div class="waybill_item warbill_w" v-if="is_incubator !== '1'">
            <span class="order-number-name">温层：</span>
            <el-select
              v-model="formData.Thermosphere"
              :disabled="is_incubator === '0'"
            >
              <el-option
                v-for="temp in ThermosphereType"
                :key="temp.item_code"
                :label="temp.item_name"
                :value="temp.item_code"
              />
            </el-select>
          </div>
          <div class="waybill_item warbill_w">
            <span style="color: white">* </span>
            <span class="order-number-name">预计时效：</span>
            <el-input
              v-model="formData.transport_days"
              placeholder=""
              style="width: 220px"
            ></el-input>
          </div>
          <div class="waybill_item warbill_s">
            <span style="color: red">* </span>
            <span class="order-number-name">送货方式：</span>
            <el-select style="width: 190px" v-model="formData.Delivery_method">
              <el-option
                v-for="type in deliveryMethodsList"
                :key="type.item_code"
                :label="type.item_name"
                :value="type.item_code"
              />
            </el-select>
          </div>
          <div class="waybill_item warbill_s">
            <span style="color: red">* </span>
            <span class="order-number-name">是否投保：</span>
            <el-switch
              v-model="formData.insure_value"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </div>
          <div class="waybill_item warbill_d">
            <span style="color: white"></span>
            <span class="order-number-name">提货时间：</span>
            <el-date-picker
              v-model="formData.pickerTime"
              type="datetime"
              value-format="timestamp"
              placeholder="选择日期时间"
              default-time="12:00:00"
              :default-value="new Date()"
            >
            </el-date-picker>
          </div>
        </div>
        <!-- 发货方 ============================================== -->
        <div class="waybill_mid">
          <!-- 发货人 -->
          <div class="waybill_mid_left">
            <div class="left_title_l">
              <span class="icon"><i class="el-icon-s-custom"></i></span>
              <span>发货方</span>
            </div>
            <div class="left_title_r">
              <div class="left_title_shipper">
                <span style="color: red">* </span>
                <span>发货人：</span>
                <el-select
                  :disabled="disabledTure.sender.name"
                  style="width: 320px"
                  filterable
                  remote
                  reserve-keyword
                  default-first-option
                  :remote-method="searchShipperList"
                  v-model="formData.sender.name"
                  @change="selectedConsignor"
                  @blur.native.capture="saveSenderName($event)"
                >
                  <el-option
                    v-for="item in shipperList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="left_title_shipper">
                <span style="color: red">* </span>
                <span>手机号码：</span>
                <el-input
                  style="width: 308px"
                  :disabled="disabledTure.sender.phone"
                  v-model="formData.sender.phone"
                ></el-input>
              </div>
              <div class="left_title_shipper">
                <span style="color: red">* </span>
                <span>发货公司：</span>
                <el-input
                  style="width: 308px"
                  :disabled="disabledTure.sender.company"
                  v-model="formData.sender.company"
                  placeholder=""
                ></el-input>
              </div>
              <div class="left_title_shipper">
                <span style="color: red">* </span>
                <span>详细地址：</span>
                <el-input
                  style="width: 308px"
                  :disabled="disabledTure.sender.address"
                  v-model="formData.sender.address"
                  placeholder="请输入详细地址"
                  @blur="zhuandanChang"
                ></el-input>
              </div>
              <div class="left_title_shipper">
                <span style="color: red; margin-right: 10px"></span>
                <span>发货地址：</span>
                <el-cascader
                  style="width: 308px"
                  :disabled="disabledTure.sender_pcd"
                  :options="addresssequence"
                  v-model="formData.sender_pcd"
                  placeholder="请选择省市区"
                  :props="{
                    value: 'id',
                    label: 'name',
                    children: 'next_level_data',
                  }"
                ></el-cascader>
              </div>
            </div>
          </div>
          <!-- 收货人 -->
          <div class="waybill_mid_right">
            <div class="right_title_l">
              <span class="icon"><i class="el-icon-user-solid"></i></span>
              <span>收货方</span>
            </div>
            <div class="right_title_r">
              <div class="left_title_shipper">
                <span style="color: red">* </span>
                <span>收货人：</span>
                <el-select
                  style="width: 320px"
                  :disabled="disabledTure.receiver.name"
                  filterable
                  remote
                  reserve-keyword
                  default-first-option
                  :remote-method="searchConsigneeList"
                  v-model="formData.receiver.name"
                  @change="selectedConsignee"
                  @blur.native.capture="saveReceiverName($event)"
                >
                  <el-option
                    v-for="item in consigneeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="left_title_shipper">
                <span style="color: red">* </span>
                <span>手机号码：</span>
                <el-input
                  style="width: 308px"
                  :disabled="disabledTure.receiver.phone"
                  v-model="formData.receiver.phone"
                ></el-input>
              </div>
              <div class="left_title_shipper">
                <span style="color: red">* </span>
                <span>收货公司：</span>
                <el-input
                  style="width: 308px"
                  :disabled="disabledTure.receiver.company"
                  v-model="formData.receiver.company"
                  placeholder=""
                ></el-input>
              </div>
              <div class="left_title_shipper">
                <span style="color: red">* </span>
                <span>详细地址：</span>
                <el-input
                  style="width: 308px"
                  :disabled="disabledTure.receiver.address"
                  v-model="formData.receiver.address"
                  placeholder="请输入详细地址"
                  @blur="FuzhiaddressChange"
                ></el-input>
              </div>
              <div class="left_title_shipper">
                <span style="color: red; margin-right: 10px"></span>
                <span>收货地址：</span>
                <el-cascader
                  style="width: 308px"
                  :disabled="disabledTure.receiver_pcd"
                  :options="addresssequence"
                  v-model="formData.receiver_pcd"
                  placeholder="请选择省市区"
                  :props="{
                    value: 'id',
                    label: 'name',
                    children: 'next_level_data',
                  }"
                ></el-cascader>
              </div>
            </div>
          </div>
        </div>
        <!-- 货物信息  -->
        <div class="order-information">
          <div class="total_left_title">
            <span><i></i><b>货物信息：</b></span>
          </div>
          <div class="order-shiper-img">
            <span>随货同行单:</span>
            <div style="display: inline-block; margin-left: 20px">
              <el-upload
                action
                :auto-upload="false"
                list-type="picture-card"
                :before-remove="beforeRemove"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-change="handleChange"
                :file-list="fileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
          <div class="order-shiper-warp">
            <el-table
              ref="singleTable"
              :data="goodsArray"
              highlight-current-row
              style="width: 100%"
              border
            >
              <el-table-column width="50" key="0">
                <template slot="header">
                  <span @click="addShiper(scope)" style="font-size: 20px"
                    >+</span
                  >
                </template>
                <template slot-scope="scope">
                  <div class="remodername">
                    <div class="number">{{ scope.$index + 1 }}</div>
                    <div class="remodercenter el-icon-minus"></div>
                  </div>
                </template>
              </el-table-column>
              <!-- 需要投保的时候货物名称是必填项 -->
              <el-table-column
                property="name"
                label="货物名称"
                width="180"
                key="1"
                v-if="formData.insure_value === '1'"
              >
                <template slot="header">
                  <span style="color: red">*货物名称</span>
                </template>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="name"
                label="货物名称"
                width="180"
                key="12"
                v-else
              >
                <template slot="header">
                  <span>货物名称</span>
                </template>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="goods_no"
                label="方案编码"
                width="180"
                v-if="is_incubator === true"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.goods_no"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="number"
                label="件数"
                prop="number"
                width="180"
                key="2"
              >
                <template slot="header">
                  <span style="color: red">*件数</span>
                </template>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.number"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="commodity_model"
                label="温层"
                width="180"
                key="10"
                v-if="is_incubator === true"
              >
                <template slot="header">
                  <span style="color: red">*温层</span>
                </template>
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.thermosphere"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in ThermosphereType"
                      :key="item.item_code"
                      :label="item.item_name"
                      :value="item.item_code"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                property="frozen_box_number"
                label="冻存盒数量"
                width="180"
                v-if="is_incubator === true"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.frozen_box_number"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="packing"
                label="货物包装"
                width="180"
                key="3"
                v-if="is_incubator === false"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.packing"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option label="纸箱" value="0"> </el-option>
                    <el-option label="木箱" value="1"> </el-option>
                    <el-option label="纤袋" value="2"> </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                property="packing"
                label="包装型号"
                width="180"
                key="11"
                v-if="is_incubator === true"
              >
                <template slot="header">
                  <span>包装型号</span>
                </template>
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.package_type"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in package_typeList"
                      :key="item.item_code"
                      :label="item.item_name"
                      :value="item.item_code"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                property="package_quantity"
                label="包装数量"
                width="180"
                key="13"
              >
                <template slot="header">
                  <span>包装数量</span>
                </template>
                <template slot-scope="scope">
                  <el-input v-model="scope.row.package_quantity"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="weight"
                label="重量(kg)"
                width="180"
                key="4"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.weight"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="volume"
                label="体积(m³)"
                width="180"
                key="5"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.volume"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="price"
                label="价格(元)"
                width="180"
                key="6"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.price"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                property="declared_value"
                label="价值(元)"
                width="180"
                key="7"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.declared_value"></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="waybill_total">
          <div class="total_left">
            <div class="total_left_title">
              <span><i></i><b>合计运费：</b></span>
              <i>{{ totalFreight }}</i>
            </div>
            <div class="total_left_content_s">
              <div
                class="total_left_content"
                v-for="item in costList"
                :key="item.item_code"
              >
                <div>
                  <span class="order-number-name">{{ item.item_name }}：</span>
                  <el-input
                    style="width: 180px"
                    v-model="formData.expense[item.item_code]"
                    placeholder=""
                  ></el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 付款方式=============== -->
        <div class="payment_method_class">
          <div class="total_mid">
            <div class="total_left_title">
              <span><i></i><b>付款方式</b></span>
            </div>
            <div class="total_left_content">
              <div class="four_w four_w_select">
                <span style="color: red">* </span>
                <span class="order-number-name">付款方式：</span>
                <el-select
                  v-model="formData.fkfshi"
                  style="width: 100px"
                  @change="autoUpdateFee"
                >
                  <el-option
                    v-for="pay in payMethods"
                    :key="pay.item_code"
                    :label="pay.item_name"
                    :value="pay.item_code"
                  />
                </el-select>
              </div>
              <div
                class="four_w four_w_select"
                v-for="item in payMethods"
                :key="item.item_code"
              >
                <span class="order-number-name">{{ item.item_name }}：</span>
                <el-input
                  style="width: 180px"
                  v-model="formData.payment[item.item_code]"
                  placeholder=""
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <!-- 经办人 ======================== -->
        <div class="waybill_message">
          <div class="waybill_item">
            <div class="waybill">
              <span style="color: red">* </span>
              <span class="order-number-name">经办人：</span>
              <el-select
                style="width: 130px"
                v-model="formData.Handler"
                :disabled="formData.handler_name ? true : false"
              >
                <el-option
                  v-for="person in Handlers"
                  :key="person.id"
                  :label="person.nickname"
                  :value="person.id"
                />
              </el-select>
            </div>
          </div>
          <div class="waybill_item" style="width: 280px">
            <span class="order-number-name">回单：</span>
            <el-checkbox
              label="客户回单"
              :disabled="disabledTure.receipt1"
              v-model="receipt1"
            ></el-checkbox>
            <el-checkbox
              label="我司回单"
              :disabled="disabledTure.receipt2"
              v-model="receipt2"
            ></el-checkbox>
          </div>
          <div class="waybill_item waybill_item_yuns">
            <span class="order-number-name">运输方式：</span>
            <el-select v-model="formData.type_shipping">
              <el-option
                v-for="pay in transportsWayList"
                :key="pay.item_code"
                :label="pay.item_name"
                :value="pay.item_code"
              />
            </el-select>
          </div>
          <div class="waybill_item warbill_f">
            <div class="warbill_f_r">
              <span class="order-number-name">备注：</span>
              <el-input
                style="width: 150px"
                v-model="formData.remarks"
                placeholder=""
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="nextorder">
        <div
          class="nextorder_affirm"
          v-if="
            merge_data_id.disabled == 4 && merge_data_id.tabsname == 'first'
          "
        >
          <el-button type="primary" plain @click="nextOrder()"
            >下一单</el-button
          >
        </div>
        <div
          class="nextorder_affirm_content"
          v-if="
            merge_data_id.disabled == 4 && merge_data_id.tabsname == 'second'
          "
        >
          <el-button type="primary" plain @click="nextOrderSender()"
            >返回上一单</el-button
          >
          <el-button
            type="primary"
            plain
            @click="savenextOrderSender()"
            v-if="
              merge_data_id.disabled == 4 && merge_data_id.tabsname == 'second'
            "
            >确认</el-button
          >
        </div>
        <div class="confirmSingle_content" v-if="merge_data_id.disabled == 5">
          <el-button @click="confirmSingle()">确认</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  WaybillDetailFn,
  dictionaryBatch,
  getTransportsList,
  reqHandlersList,
  getConsignorList,
  ConsigneeInterface,
  reqWebsiteList,
  getRouterList,
  single_details, //合单详情
  recognitionListcity,
} from "@/api/waybill";
import { timestamp10 } from "@/utils/mUtils";
import { uploading, regionList } from "@/page/material/common/common";
export default {
  name: "disassembly",
  props: ["merge_data_id"],
  data() {
    return {
      // 地址库
      addresssequence: [],
      // 禁用数据
      disabledTure: {
        waybill_code: true,
        departure_id: true,
        departure_station_name: true,
        at_station_name: true,
        destination_network_id: true,
        Thermosphere: true,
        transport_days: true,
        sender: {
          name: true,
          phone: true,
          company: true,
          address: true,
        },
        sender_pcd: true,
        receiver: {
          name: true,
          phone: true,
          company: true,
          address: true,
        },
        receiver_pcd: true,
        receipt1: true,
        receipt2: true,
      },
      // 详情数据
      result_list: {},
      options: [],
      options2: [],
      ThermosphereType: [], //温层的类型
      payMethods: [], //支付方式的类型
      transportsType: [], //承运产品类型
      Handlers: [], //经办人
      shipperList: [], //发货人
      consigneeList: [], //收货人
      websiteList: [], //网点
      areaType: [], //大区类型
      routerList: [], //路由
      costList: [], //费用
      deliveryMethodsList: [], //送货方式
      transportsWayList: [], //运输方式
      package_typeList: [], //保温箱型号
      is_incubator: false, //是否是保温箱
      receipt1: true, //回单选项1
      receipt2: true, //回单选项2
      fileList: [], //上传的文件
      dialogImageUrl: "",
      dialogVisible: false,
      formData: {
        order_id: "",
        images: [],
        waybill_code: "", //运单号 waybill_number
        transport_type: "", //承运类型 transport_type
        departure: "", //出发网点 from_network
        departure_id: "", //出发网点的id
        departure_station: "", //发站 from_region_id
        departure_station_name: "", //发站 from_region
        at_station: "", //到站 to_region_id
        at_station_name: "", //到站 to_region
        destination_network: "", //目的网点 to_network
        destination_network_id: "", //目的网点的id
        router_id: "", //路由的id
        router: "", //路由 router
        waybill_product_type: "", //产品类型 waybill_product_type
        Thermosphere: "", //温层 thermosphere
        ThermosphereName: "", //
        area_type: "", //区域 area_type
        Delivery_method: "", // 送货方式 delivery_method
        insure_value: "0", //投保
        sender_pcd: [], //省市区的id
        sender: {
          id: "", //发货人的id
          name: "", //发货人 sender.name
          company: "", //单位
          phone: "", //发货人手机号 sender.phone
          province_id: "",
          city_id: "",
          district_id: "",
          address: "", //发货地址 sender.address
        },
        receiver_pcd: [], //省市区的id
        receiver: {
          id: "",
          name: "",
          company: "",
          phone: "",
          province_id: "",
          city_id: "",
          district_id: "",
          address: "",
        },
        expense: {}, //费用
        payment: {},
        fkfshi: "", //付款方式 payment.payment_method
        Service_Charge: "",
        payment_goods: "",
        Handler: "", //经办人 handler_id
        handler_name: "",
        konghuo: "", //控货 goods_action
        tihuo: "", //提货 pick_up_goods
        Receipt: "", //回单 receipt_count
        type_shipping: "", //运输方式 transport_days
        transport_days: "", //预计时效 aging
        remarks: "", //备注
        createTime: "",
        pickerTime: "", //提货时间
      },
      goodsArray: [
        {
          name: "",
          packing: "", //包装
          package_quantity: "", //包装数量
          goods_no: "", //编号
          number: "", //件数
          weight: "", //重量
          volume: "", //体积
          price: "", //价格
          declared_value: "", //价值
          thermosphere: "", //温层
          package_type: "", //保温箱型号
        },
      ],
      mode: "detail",
    };
  },
  async created() {
    this.getThermosphereType();
    this.getHandlersList();
    this.getWebsiteList();
    this.getAreaList();
  },
  mounted() {
    this.provincectiy();
    if (this.merge_data_id.disabled == "4") {
      this.disabledfuntion(4);
      WaybillDetailFn({ id: this.merge_data_id.id }).then((result) => {
        this.selectedDetail = result.data;
        this.format();
      });
    } else if (this.merge_data_id.disabled == "5") {
      var param = {
        waybill_id_list: this.merge_data_id.id,
      };
      single_details(param).then((res) => {
        if (res.code == "10000") {
          this.selectedDetail = res.data;
          this.format();
        }
      });
    }
  },
  computed: {
    disabled() {
      return this.mode === "detail";
    },
    totalFreight() {
      let num = 0;
      for (var item in this.formData.expense) {
        if (
          item != 2 &&
          item != 3 &&
          item != 7 &&
          item != 12 &&
          item !== "total_freight"
        ) {
          num += this.formData.expense[item] * 1;
        }
      }
      return num.toFixed(2);
    },
  },
  watch: {
    totalFreight: {
      deep: true,
      handler() {
        let num = 0;
        for (var item in this.formData.expense) {
          if (
            item != 2 &&
            item != 3 &&
            item != 7 &&
            item != 12 &&
            item !== "total_freight"
          ) {
            num += this.formData.expense[item] * 1;
          }
        }
        this.autoUpdateFee(this.formData.fkfshi);
        return num;
      },
    },
  },
  methods: {
    //根据详细地址获取省市区 发货信息
    zhuandanChang() {
      if ((this.formData.sender_pcd || []).length !== 0) {
        return;
      }
      let data = {
        detail_address: this.formData.sender.address,
      };
      recognitionListcity(data).then((res) => {
        this.formData.sender_pcd = [
          res.data.province_id,
          res.data.city_id,
          res.data.area_id,
        ];
      });
    },
    FuzhiaddressChange() {
      if ((this.formData.receiver_pcd || []).length !== 0) {
        return;
      }
      let data = {
        detail_address: this.formData.receiver.address,
      };
      recognitionListcity(data).then((res) => {
        this.formData.receiver_pcd = [
          res.data.province_id,
          res.data.city_id,
          res.data.area_id,
        ];
      });
    },
    drawer_data_false() {
      return true;
    },

    saveSenderName(event) {
      var receiver_value = event.target.value;
      let receiver_name = this.shipperList.find(
        (item) => item.name == receiver_value
      );
      if (receiver_name == undefined) {
        this.formData.sender.company_id = "";
      } else {
        this.formData.sender.company_id = this.formData.sender.company_id;
      }
    },

    saveReceiverName(event) {
      // console.log("收货人的没有发现这个热的时候");
      var receiver_value = event.target.value;
      let receiver_name = this.consigneeList.find(
        (item) => item.name == receiver_value
      );
      // console.log(receiver_name);
      if (receiver_name == undefined) {
        this.formData.receiver.company_id = "";
      } else {
        this.formData.receiver.company_id = this.formData.receiver.company_id;
      }
    },
    // 地址库
    provincectiy() {
      regionList(0).then((res) => {
        this.addresssequence = res.data;
      });
    },
    // 如果发现没有发货人清空id和发货公司id
    sender_customer_id() {
      var sender_name = this.formData.sender.name;
      let piece_value = this.shipperList.find(
        (item) => item.name == sender_name
      );
      if (piece_value == undefined) {
        this.formData.sender.customer_id = "";
        this.formData.sender.id = "";
      } else {
      }
    },
    // 如果发现没有收货人清空id和收货公司id
    receiver_customer_id() {
      var receiver_name = this.formData.receiver.name;
      let piece_value = this.consigneeList.find(
        (item) => item.name == receiver_name
      );
      if (piece_value == undefined) {
        this.formData.receiver.customer_id = "";
        this.formData.receiver.id = "";
      } else {
      }
    },
    sentSchoolName() {
      // 已进入的时候先将他弄为空
      this.result_list = {};
      let { formData, goodsArray } = this;
      if (formData.waybill_product_type == "") {
        this.$message({
          message: "承运产品类型不能为空",
          type: "error",
        });
      } else if (
        formData.destination_network_id == "" ||
        formData.departure_id == ""
      ) {
        if (formData.destination_network == "") {
          formData.destination_network = this.websiteList.find(
            (item) => item.id == formData.destination_network_id
          ).name;
        }
        this.$message({
          message: "目的网点不能为空",
          type: "error",
        });
      } else if (formData.Delivery_method == "") {
        this.$message({
          message: "送货方式不能为空",
          type: "error",
        });
      } else if (goodsArray.some((val) => val.number == "")) {
        this.$message({
          message: "货物件数不能为空",
          type: "error",
        });
      } else if (
        this.is_incubator === true &&
        goodsArray.some((val) => val.thermosphere == "")
      ) {
        this.$message({
          message: "温层不能为空",
          type: "error",
        });
      } else if (
        formData.insure_value == "1" &&
        goodsArray.some((val) => val.name == "")
      ) {
        this.$message({
          message: "货物名称为空",
          type: "error",
        });
      } else if (formData.fkfshi == "") {
        this.$message({
          message: "付款方式不能为空",
          type: "error",
        });
      } else if (formData.Handler == "") {
        this.$message({
          message: "经办人不能为空",
          type: "error",
        });
      } else if (this.totalFreight == 0) {
        this.$message({
          message: "运费项不能为空",
          type: "error",
        });
      } else if (
        formData.sender.name == "" ||
        formData.sender.company == "" ||
        formData.sender.phone == "" ||
        formData.sender.address == ""
        // ||formData.sender_pcd.length === 0
      ) {
        this.$message({
          message: "缺少发货人必填项",
          type: "error",
        });
      } else if (
        formData.receiver.name == "" ||
        formData.receiver.company == "" ||
        formData.receiver.phone == "" ||
        formData.receiver.address == ""
        // ||formData.receiver_pcd.length === 0
      ) {
        this.$message({
          message: "缺少收货人必填项",
          type: "error",
        });
      } else {
        this.fullscreenLoading = true;
        let order_id = formData.order_id;
        let waybill_number = formData.waybill_code;
        let from_region = formData.departure_station_name;
        let to_region = formData.at_station_name;
        let from_network_id = String(formData.departure_id);
        let to_network_id = String(formData.destination_network_id);
        if (
          formData.destination_network == undefined ||
          formData.departure == undefined
        ) {
          formData.departure = this.websiteList.find(
            (item) => item.id == formData.departure_id
          ).name;
          formData.destination_network = this.websiteList.find(
            (item) => item.id == formData.destination_network_id
          ).name;
        }
        let from_network = formData.departure;
        let to_network = formData.destination_network;
        let router_id = String(formData.router_id);
        let router = String(formData.router);
        let thermosphere = formData.Thermosphere;
        let delivery_method = formData.Delivery_method;
        let waybill_product_type = formData.waybill_product_type;
        let insure_value = formData.insure_value;
        let images = formData.images;
        let goods = goodsArray.map((item2) => {
          let item = { ...item2 };
          item.weight = String(item.weight);
          item.volume = String(item.volume);
          item.price = String(item.price);
          item.declared_value = String(item.declared_value);
          item.number = String(item.number);
          item.thermosphere = String(item.thermosphere);
          item.package_type = String(item.package_type);
          return item;
        });
        let agent_collection = {
          agent_collection: "",
          service_charge: "",
        };
        let handler_id = formData.Handler ? String(formData.Handler) : "";
        let handler_name = formData.handler_name
          ? String(formData.handler_name)
          : this.Handlers.find((item) => item.id == handler_id).name;
        let goods_action = "";
        let receipt_count;
        if (this.receipt1 === true) {
          if (this.receipt2 === true) {
            receipt_count = "3";
          } else {
            receipt_count = "1";
          }
        } else if (this.receipt2 === true) {
          receipt_count = "2";
        }
        let transport_days = formData.type_shipping;
        let remark = formData.remarks;
        let aging = formData.transport_days;
        let collect_time = {
          start_time: timestamp10(formData.pickerTime),
          end_time: "",
        };
        formData.sender.id =
          formData.sender.id == 0 ? "" : String(formData.sender.id);
        formData.sender.name = String(formData.sender.name);
        formData.sender.company_id = String(formData.sender.company_id);
        formData.sender.province_id = formData.sender_pcd[0]
          ? String(formData.sender_pcd[0])
          : "";
        formData.sender.city_id = formData.sender_pcd[1]
          ? String(formData.sender_pcd[1])
          : "";
        formData.sender.district_id = formData.sender_pcd[2]
          ? String(formData.sender_pcd[2])
          : "";
        formData.receiver.id =
          formData.receiver.id == 0 ? "" : String(formData.receiver.id);
        formData.receiver.name = String(formData.receiver.name);
        formData.receiver.company_id = String(formData.receiver.company_id);
        formData.receiver.province_id = formData.receiver_pcd[0]
          ? String(formData.receiver_pcd[0])
          : "";
        formData.receiver.city_id = formData.receiver_pcd[1]
          ? String(formData.receiver_pcd[1])
          : "";
        formData.receiver.district_id = formData.receiver_pcd[2]
          ? String(formData.receiver_pcd[2])
          : "";
        let expense = {};
        for (var item in formData.expense) {
          expense[item] = String(formData.expense[item]);
        }
        expense.total_freight = String(this.totalFreight * 1);
        formData.payment.payment_method = formData.fkfshi;

        agent_collection.agent_collection = String(formData.payment_goods);
        agent_collection.service_charge = String(formData.Service_Charge);
        if (formData.konghuo === true) {
          if (formData.tihuo === true) {
            goods_action = "3";
          } else {
            goods_action = "1";
          }
        } else if (formData.tihuo === true) {
          goods_action = "2";
        }
        try {
          this.sender_customer_id();
          this.receiver_customer_id();
          let result = {
            order_id,
            waybill_number,
            from_region,
            to_region,
            from_network,
            to_network,
            to_network_id,
            from_network_id,
            router_id,
            router,
            thermosphere,
            delivery_method,
            waybill_product_type,
            insure_value,
            sender: formData.sender,
            receiver: formData.receiver,
            goods,
            expense,
            payment: formData.payment,
            agent_collection,
            handler_id,
            handler_name,
            goods_action,
            receipt_count,
            transport_days,
            remark,
            aging,
            images,
            collect_time,
          };
          this.result_list = result;
        } catch (error) {
          this.fullscreenLoading = false;
          this.$message({
            type: "error",
            message: "error",
          });
        }
      }
    },
    // 确认合单
    confirmSingle() {
      this.sentSchoolName();
      this.$emit("affirmMerge", this.result_list);
      Object.assign(this.$data.formData, this.$options.data().formData);
      Object.assign(this.$data.goodsArray, this.$options.data().goodsArray);
    },
    // 下一单
    nextOrder() {
      this.sentSchoolName();
      if (this.selectedDetail.id != undefined) {
        if (Object.keys(this.result_list).length > 0) {
          var name = {
            name: "second",
            waybill_list: this.result_list,
          };
          this.$emit("changenext", name);
        }
      }
    },
    // 上一单
    nextOrderSender() {
      var name = {
        name: "first",
      };
      this.$emit("changenextsecond", name);
    },
    // 保存
    savenextOrderSender() {
      this.sentSchoolName();
      if (this.selectedDetail.id != undefined) {
        if (Object.keys(this.result_list).length > 0) {
          var name = {
            name: "second",
            waybill_list: this.result_list,
          };
          this.$emit("saveCode", name);
        }
      }
    },
    // 禁用的内容
    disabledfuntion(val) {
      if (val == "4") {
        this.disabledTure.waybill_code = false;
        this.disabledTure.departure_station_name = false;
        this.disabledTure.at_station_name = false;
        this.disabledTure.destination_network_id = false;
        this.disabledTure.Thermosphere = false;
        this.disabledTure.receiver.name = false;
        this.disabledTure.receiver.phone = false;
        this.disabledTure.receiver.company = false;
        this.disabledTure.receiver_pcd = false;
        this.disabledTure.receiver.address = false;
      }
    },
    async getThermosphereType() {
      let result1 = await dictionaryBatch({
        codes: [
          "thermosphere",
          "pay_way",
          "cost",
          "delivery_method",
          "transport_way",
          "Package_model",
        ],
      });
      let result2 = await getTransportsList({ is_all: false });
      this.transportsType = result2.data.data;
      this.payMethods = result1.data.list.pay_way;
      this.ThermosphereType = result1.data.list.thermosphere;
      this.costList = result1.data.list.cost.reverse().slice(0, 10);
      this.deliveryMethodsList = result1.data.list.delivery_method;
      this.transportsWayList = result1.data.list.transport_way;
      this.package_typeList = result1.data.list.Package_model;
    },
    async getHandlersList() {
      let result = await reqHandlersList({ branch_id: "1" });
      this.Handlers = result.data;
    },
    async getWebsiteList() {
      let result = await reqWebsiteList({ type: "0" });
      this.websiteList = result.data;
    },
    async getAreaList() {
      let result = await reqWebsiteList({ type: "1" });
      this.areaType = result.data;
    },
    selectedWebsite(id) {
      //选择出发网点
      let piece = this.websiteList.find((item) => item.id == id);
      this.formData.departure = piece.name;
    },
    selectedWebsite2(id) {
      //选择目的网点
      let piece = this.websiteList.find((item) => item.id == id);
      this.formData.destination_network = piece.name;
    },
    searchRouterList(query) {
      //获取路由
      if (query !== "") {
        setTimeout(async () => {
          let { router, router_id } = this.formData;
          let result = await getRouterList({
            router_id,
            router,
          });
          this.routerList = result.data;
        }, 200);
      } else {
        this.routerList = [];
      }
    },
    selectedRouter(id) {
      //选择路由
      this.formData.router = this.routerList.find((item) => item.id == id).name;
    },
    searchShipperList(query) {
      //获取发货人
      if (query !== "") {
        setTimeout(async () => {
          let result = await getConsignorList({
            branch_id: 1,
            name: query,
            mobile: this.formData.sender.phone,
          });
          this.shipperList = result.data;
        }, 200);
      } else {
        this.shipperList = [];
      }
    },
    searchConsigneeList(query) {
      // console.log(
      //   this.formData.sender.company_id,
      //   " this.formData.receiver.name"
      // );
      this.formData.receiver.name = query;
      //获取收货人
      if (query !== "") {
        setTimeout(async () => {
          let result = await ConsigneeInterface({
            branch_id: 1,
            name: query,
            mobile: "",
            customer_id:
              this.formData.sender.company_id == ""
                ? 0
                : this.formData.sender.company_id * 1,
          });
          this.consigneeList = result.data;
        }, 200);
      } else {
        this.consigneeList = [];
      }
    },
    selectedConsignor(id) {
      //选择发货人
      if (id) {
        let piece = this.shipperList.find((item) => item.id == id);
        if (piece !== undefined) {
          this.formData.sender.name = piece.name;
          this.formData.sender.phone = piece.mobile;
          this.formData.sender.id = piece.id;
          this.formData.sender.company = piece.customer_name;
          this.formData.sender.company_id = piece.customer_id;
          this.formData.sender_pcd = [
            piece.province_id,
            piece.city_id,
            piece.district_id,
          ];
          this.formData.sender.address = piece.address;
        } else {
          this.formData.sender.id = "";
          this.formData.sender.company_id = "";
        }
      }
    },
    selectedConsignee(id) {
      //选择收货人
      if (id) {
        let piece = this.consigneeList.find((item) => item.id == id);
        if (piece !== undefined) {
          this.formData.receiver.name = piece.name;
          this.formData.receiver.phone = piece.mobile;
          this.formData.receiver.id = piece.id;
          this.formData.receiver.company = piece.customer_name;
          this.formData.receiver.company_id = piece.customer_id;
          this.formData.receiver_pcd = [
            piece.province_id,
            piece.city_id,
            piece.district_id,
          ];
          this.formData.receiver.address = piece.address;
        } else {
          this.formData.receiver.id = "";
          this.formData.receiver.company_id = "";
        }
      }
    },
    selectTransportsType(val) {
      // transportsType 承运类型列表
      this.formData.ThermosphereName = this.transportsType.find(
        (item) => item.id === val
      ).name;
      this.is_incubator = this.transportsType.find(
        (item) => item.id === val
      ).is_incubator;
      if (this.is_incubator === "0") {
        this.formData.Thermosphere = "8";
      } else {
        this.formData.Thermosphere = "";
      }
      //选择承运产品类型之后
      if (
        this.transportsType.find((item) => item.id === val).is_incubator === "1"
      ) {
        this.is_incubator = true;
      }
    },
    autoUpdateFee(val) {
      this.formData.payment = {};
      this.formData.payment[val] = String(this.totalFreight);
    },
    //添加一行货物信息
    addShiper() {
      this.goodsArray.push({
        name: "", //货物名称
        packing: "", //包装
        number: "", //件数
        weight: "", //重量
        volume: "", //体积
        price: "", //单价
        unit: "",
      });
    },
    reduce() {
      // 通过索引删除InForMationList数组中的元素
      // 因为如果不保留唯一一条数据的话再次渲染dom的时候是无法获取数据的
      if (this.goodsArray.length > 1) {
        this.goodsArray.splice(1, 1);
      } else {
        this.$message({
          message: "这是最后一条数据",
          type: "warning",
        });
      }
    },
    // 详情页面
    format() {
      this.formData.order_id = this.selectedDetail.order_id;
      this.formData.sender_pcd = [
        Number(this.selectedDetail.sender.province_id),
        Number(this.selectedDetail.sender.city_id),
        Number(this.selectedDetail.sender.district_id),
      ];
      this.formData.receiver_pcd = [
        Number(this.selectedDetail.receiver.province_id),
        Number(this.selectedDetail.receiver.city_id),
        Number(this.selectedDetail.receiver.district_id),
      ];
      if (this.selectedDetail.images) {
        this.formData.images = this.selectedDetail.images;
        this.fileList = this.selectedDetail.images.map((url) => {
          return url;
        });
      }
      this.formData.waybill_code = "";
      this.formData.createTime = this.selectedDetail.create_time;
      this.formData.area_type = this.selectedDetail.area_type;
      this.formData.departure_station_name = this.selectedDetail.from_region;
      this.formData.at_station_name = this.selectedDetail.to_region;
      this.formData.departure = this.selectedDetail.from_network;
      this.formData.destination_network = this.selectedDetail.to_network;
      this.formData.departure_id =
        this.selectedDetail.from_network_id == "0"
          ? ""
          : this.selectedDetail.from_network_id * 1;
      // ? this.selectedDetail.from_network_id * 1
      // : "";
      this.formData.destination_network_id =
        this.selectedDetail.to_network_id == "0"
          ? ""
          : this.selectedDetail.to_network_id * 1;
      // ? this.selectedDetail.to_network_id * 1
      // : "";
      this.searchRouterList(this.selectedDetail.router_id);
      this.formData.router_id =
        this.selectedDetail.router_id == 0
          ? ""
          : this.selectedDetail.router_id * 1;
      this.formData.router = this.selectedDetail.router;
      this.formData.Thermosphere = this.selectedDetail.thermosphere;
      setTimeout(() => {
        this.formData.waybill_product_type =
          this.selectedDetail.waybill_product_type == "0"
            ? ""
            : this.selectedDetail.waybill_product_type;
        this.selectTransportsType(this.formData.waybill_product_type);
      }, 1000);
      this.formData.insure_value = this.selectedDetail.insure_value;
      this.formData.Delivery_method = this.selectedDetail.delivery_method;
      this.formData.Handler = this.selectedDetail.handler_id
        ? this.selectedDetail.handler_id * 1
        : "";
      this.formData.handler_name = this.selectedDetail.handler_name;
      this.formData.Receipt = this.selectedDetail.receipt_count;
      this.formData.transport_days = this.selectedDetail.transport_days;
      this.formData.type_shipping = this.selectedDetail.transport_way;
      this.formData.remarks = this.selectedDetail.remark;
      if (this.selectedDetail.goods_action === "3") {
        this.formData.konghuo = true;
        this.formData.tihuo = true;
      } else if (this.selectedDetail.goods_action === "2") {
        this.formData.tihuo = true;
        this.formData.konghuo = false;
      } else if (this.selectedDetail.goods_action === "1") {
        this.formData.konghuo = true;
        this.formData.tihuo = false;
      } else {
        this.formData.konghuo = false;
        this.formData.tihuo = false;
      }
      this.formData.sender = this.selectedDetail.sender;
      this.formData.pickerTime =
        this.selectedDetail.collect_time.start_time === "0"
          ? ""
          : this.selectedDetail.collect_time.start_time * 1000;
      this.searchShipperList(this.selectedDetail.sender.name);
      this.formData.receiver = this.selectedDetail.receiver;
      this.searchConsigneeList(this.selectedDetail.receiver.name);
      this.goodsArray = this.selectedDetail.goods.map((item) => {
        item.weight = item.weight / 1;
        item.volume = item.volume / 1;
        item.price = item.price / 1;
        item.declared_value = item.declared_value / 1;
        item.thermosphere = item.thermosphere;
        item.package_type = item.package_type !== "0" ? item.package_type : "";
        return item;
      });
      for (var item in this.selectedDetail.expense) {
        this.selectedDetail.expense[item] =
          this.selectedDetail.expense[item] / 1;
      }
      this.formData.expense = this.selectedDetail.expense;
      this.formData.fkfshi = this.selectedDetail.payment.payment_method;
      for (var item in this.selectedDetail.payment) {
        this.selectedDetail.payment[item] =
          this.selectedDetail.payment[item] / 1;
      }
      this.formData.payment = this.selectedDetail.payment;

      this.formData.payment_goods =
        this.selectedDetail.agent_collection.agent_collection / 1;
      this.formData.Service_Charge =
        this.selectedDetail.agent_collection.service_charge / 1;
      if (this.selectedDetail.receipt_count === "3") {
        this.receipt1 = true;
        this.receipt2 = true;
      } else if (this.selectedDetail.receipt_count === "2") {
        this.receipt2 = true;
        this.receipt1 = false;
      } else if (this.selectedDetail.receipt_count === "1") {
        this.receipt1 = true;
        this.receipt2 = false;
      } else {
        this.receipt1 = false;
        this.receipt2 = false;
      }
      this.formData.Receipt = this.selectedDetail.receipt_count;
      this.formData.type_shipping = this.selectedDetail.transport_days;
      this.formData.transport_days = this.selectedDetail.aging;
      this.formData.remarks = this.selectedDetail.remark;
    },
    // 上传的功能
    beforeRemove(file, fileList) {
      return this.$confirm("是否删除该图片");
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      const index = this.formData.images.findIndex(
        (item) => item.uid === file.uid
      );
      index > -1 && this.formData.images.splice(index, 1);
    },
    handleChange(file, fileList, type) {
      this.fileList = fileList;
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((res) => {
        this.formData.images.push({
          type: "0",
          uid: file.uid,
          url: res.res.requestUrls[0],
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-drawer__header {
  background: #eee !important;
  border-bottom: 1px solid #ccc !important;
  padding: 10px 20px 10px 20px !important;
}
/deep/ .select_right .el-select {
  float: right;
  width: 87px;
  padding-top: 8px;
}
/deep/ .el-drawer__header {
  margin-bottom: 12px !important;
}
/deep/ .four_w_select .el-select {
  width: 40% !important;
}
/deep/ .waybill_item_yuns .el-select {
  width: 130px !important;
}
.classadd {
  font-size: 30px;
}
.waybill_content {
  width: 98%;
  font-size: 14px;
  margin: 0 auto;
  margin-bottom: 4%;
  .waybill_title {
    height: 40px;
    .waybill_left {
      float: left;
      width: 30%;
    }
    .waybill_time {
      float: right;
    }
  }
  .article {
    border: 1px solid #e69850;
    .waybill_top {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #e69850;
      .waybill_item {
        width: 342px;
        line-height: 54px;
        padding: 0px 0px 0px 24px;
        .order-number-input {
          margin-left: 5px;
          background-color: transparent !important;
          border-radius: 2px;
          border: none;
          border-bottom: 1px solid #d5d5d5;
          font-size: 13px;
          width: 200px;
          margin-top: 5px;
          height: 30px;
        }
      }
    }
    .waybill_mid {
      width: 100%;
      display: flex;
      .left_title_r {
        padding: 0px 0px 0px 30px;
      }
      .waybill_mid_left {
        width: 50%;
        display: flex;
        .left_title_l {
          width: 91px;
          background: #e69850;
          text-align: center;
          span {
            display: block;
            color: #fff;
          }
          .icon {
            padding-top: 61px;
            font-size: 34px;
          }
        }
        .left_title_shipper {
          line-height: 54px;
          // span {
          //   display: inline-block;
          //   width: 80px;
          // }
          .order-number-input {
            background-color: transparent !important;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #d5d5d5;
            font-size: 13px;
            width: 200px;
            margin-top: 5px;
            height: 30px;
          }
        }
      }
      .waybill_mid_right {
        width: 50%;
        display: flex;
        .right_title_r {
          padding: 0px 0px 0px 30px;
        }
        .right_title_l {
          width: 91px;
          background: #e69850;
          text-align: center;
          span {
            display: block;
            color: #fff;
          }
          .icon {
            padding-top: 61px;
            font-size: 34px;
          }
        }
        .left_title_shipper {
          line-height: 54px;
          // span {
          //   display: inline-block;
          //   width: 80px;
          // }
          .order-number-input {
            background-color: transparent !important;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #d5d5d5;
            font-size: 13px;
            width: 200px;
            margin-top: 5px;
            height: 30px;
          }
        }
      }
    }
    // 货物信息
    .order-information {
      margin-top: 5px;
      .order-shiper-img {
        width: 100%;
        height: 150px;
        line-height: 34px;
        border-bottom: 1px solid black;
        span {
          margin: 20px 10px;
        }
      }
      .total_left_title {
        width: 100%;
        height: 40px;
        background: #e69850;
        span {
          display: block;
          width: 100px;
          float: left;
          i {
            width: 4px;
            height: 28px;
            background: #fff;
            display: block;
            margin-left: 10px;
            margin-top: 5px;
            float: left;
            margin-right: 5px;
            border-radius: 1px 1px;
          }
          b {
            line-height: 40px;
            color: #fff;
            font-weight: 500;
          }
        }
        i {
          line-height: 40px;
          color: #fff;
        }
      }
      .order-shiper-warp {
        .goods-info-table {
          width: 100%;
          border: 1px solid black;
          height: 30px;
          text-align: center;
          border-collapse: collapse;

          tr {
            // border: 1px solid black;
            td {
              width: 30px;
              border: 1px solid black;
            }
          }
        }

        .remodername .number {
          height: 20px;
          display: block;
        }

        .remodername:hover .number {
          display: none;
        }

        .remodername .remodercenter {
          display: none;
          color: #ff0000;
        }

        .remodername:hover .remodercenter {
          height: 20px;
          display: block;
          color: #ff0000;
        }
      }
    }
    .waybill_bot {
      border: 1px solid #e69850;
      min-height: 42px;
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      overflow: hidden;
      .waybill_border {
        width: 100%;
        min-height: 42px;
        overflow: hidden;
        .waybill_item {
          float: left;
          // width: 15%;
          height: 42px;

          .select_right {
            width: 87px;
            float: left;
          }
          .order-number-name {
            line-height: 42px;
            // padding-left: 5px;
            float: left;
          }
          .order-number-input {
            width: 122px;
            border-bottom: 1px solid #d5d5d5;
            float: left;
            margin-top: 5px;
            height: 30px;
          }
          .order-number-input_moeny {
            width: px;
            border-bottom: 1px solid #d5d5d5;
            float: left;
            margin-top: 5px;
            height: 30px;
          }
        }
        .warbill_num {
          border-right: none;
        }
      }
    }
    .waybill_total {
      width: 100%;

      .total_left {
        width: 100%;
        border-right: 1px solid #e69850;
        .total_left_title {
          width: 100%;
          height: 40px;
          background: #e69850;
          span {
            display: block;
            width: 100px;
            float: left;
            i {
              width: 4px;
              height: 28px;
              background: #fff;
              display: block;
              margin-left: 10px;
              margin-top: 5px;
              float: left;
              margin-right: 5px;
              border-radius: 1px 1px;
            }
            b {
              line-height: 40px;
              color: #fff;
              font-weight: 500;
            }
          }
          i {
            line-height: 40px;
            color: #fff;
          }
        }
        .total_left_content_s {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          border-bottom: 1px solid #e69850;
          .total_left_content {
            padding: 0px 0px 0px 24px;
            width: 270px;
            line-height: 54px;
            display: flex;

            .order-number-name {
              // line-height: 42px;
              padding-left: 5px;
              float: left;
              text-align: right;
            }
            .order-number-input {
              width: 65px;
              border-bottom: 1px solid #d5d5d5;
              float: left;
              margin-top: 5px;
              height: 30px;
            }
            .order-number-input_moeny {
              width: 130px;
              border-bottom: 1px solid #d5d5d5;
              float: left;
              margin-top: 5px;
              height: 30px;
            }
          }
        }
      }
    }
    .payment_method_class {
      display: flex;
      border: 1px solid #e69850;
      border-left: none;
      border-right: none;
      // border-bottom: none;
      .total_mid {
        width: 100%;
        // background: red;
        .total_left_title {
          width: 100%;
          height: 40px;
          background: #e69850;
          span {
            display: block;
            width: 90px;
            float: left;
            i {
              width: 4px;
              height: 28px;
              background: #fff;
              display: block;
              margin-left: 10px;
              margin-top: 5px;
              float: left;
              margin-right: 5px;
              border-radius: 1px 1px;
            }
            b {
              line-height: 40px;
              color: #fff;
              font-weight: 500;
            }
          }
        }
        .total_left_content {
          display: flex;
          flex-wrap: wrap;
          // border-right: 1px solid #e69850;
          .four_w {
            width: 249px;
            line-height: 54px;
            padding: 0px 0px 0px 24px;
            .order-number-input {
              width: 65px;
              border-bottom: 1px solid #d5d5d5;
              margin-top: 5px;
              height: 30px;
            }
            .order-number-input_moeny {
              width: 130px;
              border-bottom: 1px solid #d5d5d5;
              margin-top: 5px;
              height: 30px;
            }
          }
        }
      }
      .total_right {
        width: 26%;
        .total_left_title {
          width: 100%;
          height: 40px;
          background: #e69850;
          span {
            display: block;
            width: 90px;
            float: left;
            i {
              width: 4px;
              height: 28px;
              background: #fff;
              display: block;
              margin-left: 10px;
              margin-top: 5px;
              float: left;
              margin-right: 5px;
              border-radius: 1px 1px;
            }
            b {
              line-height: 40px;
              color: #fff;
              font-weight: 500;
            }
          }
        }
        .total_right_content {
          width: 100%;
          border-left: 1px solid #e69850;
          .total_rigth_content_r {
            width: 227px;
            line-height: 57px;
            padding: 0px 0px 0px 24px;
            .order-number-name {
              text-align: right;
            }
            .order-number-input_moeny {
              border-bottom: 1px solid #d5d5d5;
              margin-top: 5px;
            }
          }
        }
      }
    }
    .waybill_message {
      width: 100%;
      display: flex;
      .waybill_item {
        width: 20%;
        border-right: 1px solid #e69850;
        line-height: 54px;
        padding: 0px 0px 0px 20px;
        display: flex;
        .order-number-name {
          font-size: 13px;
          // padding-left: 10px;
        }
        .order-number-input_d {
          margin-left: 5px;
          // background-color: transparent !important;
          border-radius: 2px;
          border: none;
          border-bottom: 1px solid #d5d5d5;
          font-size: 13px;
          width: 70px;
          float: left;
          margin-top: 5px;
          height: 30px;
        }
      }
      .warbill_f {
        .warbill_f_r {
          width: 90%;
          display: flex;
          .order-number-name {
            font-size: 13px;
            // padding-left: 10px;
          }
          .order-number-input_d {
            margin-left: 5px;
            background-color: transparent !important;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #d5d5d5;
            font-size: 13px;
            width: 70px;
            float: left;
            margin-top: 5px;
            height: 30px;
          }
        }
      }
    }
  }
  .nextorder {
    width: 100%;
    height: 50px;
    margin-top: 10px;
    display: flex;
    .nextorder_affirm {
      margin: 0px auto;
    }
    .nextorder_affirm_content {
      margin: 0px auto;
    }
    .confirmSingle_content {
      margin: 0px auto;
    }
  }
}
.footer {
  position: absolute;
  width: 100%;
  height: 50px;
  background: #f8f8f8;
  z-index: 100;
  bottom: 0px;
}
</style>
